<template>
  <div class="user-img-container" :style="{ width: width || '100%', height: height || '100%' }">
    <div class="con">
      <div class="user-img">
        <x-img :src="src" />
      </div>
      <!-- vip图标 -->
      <div class="grade-num" :style="{color:isvip?'#FF9671':'#b8b6b6',borderColor:isvip?'#FF9671':'#b8b6b6'}" v-if="num">{{ grade.vipGrade }}</div>
      <svg-icon
        icon-name="grade"
        class="grade"
        :style="{width:iconSize||'22px',height: iconSize||'22px',color:isvip?'#FF9671':'#b8b6b6',background: `radial-gradient(${isvip?'#fff':'#88889b'} 50%, transparent 50%)`}"
      ></svg-icon>
    </div>
    <div v-if="progress" :style="{ width: progress.width || '100%', margin: '8px auto' }">
      <lay-progress
        :percent="(grade.nowExperience / grade.fullExperience) * 100"
        :theme="progress.theme"
      ></lay-progress>
      <div class="wenzi">经验值:{{ grade.nowExperience }}/{{ grade.fullExperience }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps } from 'vue'
const props = defineProps({
  // 图片src
  src: {
    type: String
  },
  // 是否显示进度条
  progress: {
    type: Object
  },
  width: {
    type: String
  },
  height: {
    type: String
  },
  num: {
    type: [Boolean]
  },
  grade:{
    type:Object
  },
  iconSize: {
    type: String
  }
})
const isvip = computed(() => {
  return props.grade?.vip && new Date() < new Date(props.grade?.vipEndTime)
})
</script>

<style lang="scss" scoped>
.user-img-container {
  .con {
    width: 100%;
    height: 100%;
    position: relative;
    .user-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #fff;
      background-color: #fff;
      .el-image {
        // width: 105%;
        // height: 105%;
      }
    }
    .grade-num{
      position: absolute;
      left: 65px;
      bottom: 0;
      padding:1px;
      padding-left: 5px;
      font-size: 12px;
      font-weight: bold;
      transform-origin: left;
      transform: scale(0.8);
      border: 3px solid #FF9671;
      color: #FF9671;
      filter: brightness(120%);
      border-radius: 3px;
      line-height: normal;
    }
    .grade {
      position: absolute;
      right: 0;
      bottom: 0;
      // width: 22px;
      // height: 22px;
      // color: #FF9671;
      border-radius: 50%;
      // background: radial-gradient(#fff 50%, transparent 50%);
      filter: brightness(120%);
    }
  }
  .wenzi {
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    transform-origin: left;
    transform: scale(0.8);
  }
}
</style>
